<template>
  <div>
    <!-- 头部 -->
    <div class="header">
      <!-- 时间选择器开始 -->
      <template>
        <div class="block">
          <el-date-picker
            v-model="time"
            type="datetimerange"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
            size="small"
          >
          </el-date-picker>
        </div>
        <!-- 时间选择器结束 -->

        <!-- 状态选择开始 -->
        <div class="block">
          <el-select
            v-model="status"
            clearable
            placeholder="请选择状态"
            size="small"
          >
            <el-option value="未审核" label="未审核"></el-option>
            <el-option value="通过" label="通过"></el-option>
            <el-option value="不通过" label="不通过"></el-option>
          </el-select>
        </div>
        <!-- 状态选择结束 -->

        <!-- 编号输入框开始 -->
        <div class="block">
          <el-input
            style="width: 140px"
            placeholder="申请人编号"
            v-model="userId"
            clearable
            width="100px"
            size="small"
          >
          </el-input>
        </div>
        <!-- 编号输入框结束 -->

        <!-- 查询按钮开始 -->
        <el-button type="success" size="small" @click="toQuery">查询</el-button>
        <!-- 查询按钮结束 -->
      </template>
    </div>
    <!-- 头部 -->

    <!-- table表格开始 -->
    <el-table :data="tableData.list" style="width: 100%" size="mini">
      <!-- 序号 -->
      <el-table-column type="index" label="序号" width="50px" align="center">
      </el-table-column>

      <!-- 申请人编号 -->
      <el-table-column
        prop="userId"
        label="申请人编号"
        align="center"
        width="80px"
      >
      </el-table-column>

      <!-- 姓名 -->
      <el-table-column prop="realname" label="姓名" align="center" width="80px">
      </el-table-column>

      <!-- 申请时间 -->
      <el-table-column label="申请时间" align="center">
        <template slot-scope="scope">
          <span>{{
            scope.row.applyTime | dateFormat("{y}-{m}-{d} {h}:{i}:{s}")
          }}</span>
        </template>
      </el-table-column>

      <!-- 身份证号 -->
      <el-table-column prop="idCard" label="身份证号" align="center">
      </el-table-column>

      <!-- 身份证正面 -->
      <el-table-column
        prop="idcardPhotoPositive"
        label="身份证正面"
        align="center"
        width="80px"
      >
        <template slot-scope="scope">
          <el-popover
            placement="top-start"
            title="标题"
            width="200"
            trigger="hover"
            content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"
          >
          <img width="50px" :src="scope.row.idcardPhotoPositive" />
            <!-- <el-button slot="reference">hover 激活</el-button> -->
          </el-popover>
          
        </template>
      </el-table-column>

      <!-- 身份证反面 -->
      <el-table-column
        prop="idcardPhotoNegative"
        label="身份证反面"
        align="center"
        width="80px"
      >
        <template slot-scope="scope">
          <img width="50px" :src="scope.row.idcardPhotoNegative" />
        </template>
      </el-table-column>

      <!-- 银行卡号 -->
      <el-table-column prop="bankCard" label="银行卡号" align="center">
      </el-table-column>

      <!-- 银行卡正反面 -->
      <el-table-column prop="bankCardPhoto" label="银行卡正反面" align="center">
        <template slot-scope="scope">
          <img width="50px" :src="scope.row.bankCardPhoto" />
        </template>
      </el-table-column>

      <!-- 审核状态 -->
      <el-table-column label="状态" align="center" width="80px">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status == '通过'" type="success">{{
            scope.row.status
          }}</el-tag>
          <el-tag v-else-if="scope.row.status == '不通过'" type="danger">{{
            scope.row.status
          }}</el-tag>
          <el-tag v-else-if="scope.row.status == '未审核'" type="info">{{
            scope.row.status
          }}</el-tag>
        </template>
      </el-table-column>

      <!-- 操作 -->
      <el-table-column  label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="mini"
            @click="toPass(scope.row.id)"
            v-if="scope.row.status != '通过'"
            >通过</el-button
          >
          <el-button
            type="text"
            size="mini"
            style="color: red"
            v-if="scope.row.status != '不通过'"
            @click="toNoPass(scope.row.id)"
            >不通过</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- table表格结束 -->

    <!-- 分页组件开始 -->
    <div class="footer">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[2, 4, 6, 8]"
        :page-size="tableData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.total"
      >
      </el-pagination>
    </div>
    <!-- 分页组件结束 -->
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
import { get } from "../../utils/request";
export default {
  data() {
    return {
      // 当前默认页码
      currentPage: 1,
      // 查询页数和页码
      list: {
        page: 1,
        pageSize: 10,
      },

      input: "",
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
      ],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      // 时间-模糊查询条件
      time: "",
      // 状态-模糊查询条件
      status: "",
      // 状态-模糊查询条件
      userId: "",
    };
  },
  computed: {
    ...mapState("realName", ["tableData"]),
  },
  methods: {
    // 辅助函数
    ...mapActions("realName", ["findAllRealNameInfo"]),
    // 点击设置通过审核
    toPass(id) {
      get("/certification/checkPass", { id }).then((res) => {
        if (res.status == 200) {
          this.$message({
            message: res.message,
            type: "success",
          });
          this.findAllRealNameInfo(this.list);
        }
      });
    },
    // 点击设置不通过审核
    toNoPass(id) {
      get("/certification/checkNoPass", { id }).then((res) => {
        if (res.status == 200) {
          this.$message({
            message: res.message,
            type: "success",
          });
          this.findAllRealNameInfo(this.list);
        }
      });
    },
    // 根据条件模糊查询
    toQuery() {
      const data = {
        beginTime: new Date(this.time[0]).getTime(),
        endTime: new Date(this.time[1]).getTime(),
        status: this.status,
        userId: this.userId,
      };
      // 格式化参数 当某个属性没有值的时候 将其删除掉 以防影响网络请求的操作
      for (const key in data) {
        if (!data[key]) {
          delete data[key];
        }
      }
      let newList={
        page:1,
        pageSize:this.list.pageSize
      }
      this.list = { ...newList, ...data };
      this.currenPage = 1;
      this.findAllRealNameInfo(this.list);
    },
    // 控制每页条数
    handleSizeChange(val) {
      // 将每页要展示的数据的条数进行更新
      this.list.pageSize = val;
      // 将当前页数重置到第一页
      this.currenPage = 1;
      // 重置调用获取栏目数据方法
      this.findAllRealNameInfo(this.list);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.list.page = this.currentPage;
      // 重置调用获取栏目数据方法
      this.findAllRealNameInfo(this.list);
    },
  },
  created() {
    this.findAllRealNameInfo(this.list);
  },
  mounted() {},
};
</script>
<style scoped lang='scss'>
.header {
  display: flex;
  .block {
    margin-right: 10px;
  }
  margin-bottom: 25px;
}
.footer {
  text-align: right;
}
</style>